<style scoped>
    .inline {
        display: inline-block;
    }
    .group {
        margin-bottom: 15px;
        margin-right: 15px;
    }
    .label {
        font-weight: bold;
        margin-right: 5px;
    }
</style>

<template>
    <div class="group" :class="{inline: inline}">
        <div class="label inline" :style="{width: labelWidth}">{{label}}</div>
        <div class="content inline" :style="{width: contentWidth}"><slot/></div>
    </div>
</template>

<script>

    export default {
        name: "LabelGroup",
        data() {
            return {}
        },
        props: {
            labelWidth: {
                type: String,
                default: 'auto'
            },
            contentWidth: {
                type: String,
                default: 'auto'
            },
            label: {
                type: String
            },
            inline: {
                type: Boolean,
                default: false
            }
        },
        methods: {}
    }
</script>

